<script setup lang="ts">
import { Delete } from "@vicons/carbon";
import type { Operation } from "fast-json-patch";
import {
  NButton,
  NIcon,
  NInput,
  NList,
  NListItem,
  NScrollbar,
  NTag,
  NThing,
  NTooltip,
} from "naive-ui";

const props = defineProps<{ patch: Operation[] }>();
const emits = defineEmits<{ (e: "revoke", operation: Operation): void }>();

function value(operation: Operation) {
  if ("value" in operation) {
    return JSON.stringify(operation.value, undefined, 2);
  } else if ("from" in operation) {
    return operation.from;
  } else {
    return "";
  }
}
</script>

<template>
  <NScrollbar style="max-height: 75vh">
    <NList style="padding-right: 20px" :show-divider="false">
      <NListItem v-for="operation of props.patch">
        <NThing>
          <template #header>
            <NTag v-if="operation.op === 'add'" type="success">新增</NTag>
            <NTag v-else-if="operation.op === 'copy'" type="info">复制</NTag>
            <NTag v-else-if="operation.op === 'move'" type="info">移动</NTag>
            <NTag v-else-if="operation.op === 'remove'" type="error">移除</NTag>
            <NTag v-else-if="operation.op === 'replace'" type="warning">
              更新
            </NTag>
            <NTag v-else>未知</NTag>
            <NTag style="margin-left: 4px">{{ operation.path }}</NTag>
          </template>
          <template #header-extra>
            <NTooltip>
              <template #trigger>
                <NButton text @click="emits('revoke', operation)">
                  <template #icon>
                    <NIcon :component="Delete" />
                  </template>
                </NButton>
              </template>
              撤销
            </NTooltip>
          </template>
          <NInput
            type="textarea"
            :value="value(operation)"
            :autosize="{ maxRows: 5 }"
          />
        </NThing>
      </NListItem>
    </NList>
  </NScrollbar>
</template>
